<template>
  <div class="comments clearfix">
	<div class="head">
		<span class="topic">最新话题</span>
		<span class="sorting">按评论排序
			<i class="icon iconfont">&#xe615;</i>
		</span>
	</div>
	<div class="comments-list">
		<div class="comments-con" v-for="(element,index) in CommentsData" :key="index" >
			<div class="comments-con-head">
				<img :src="element.img" alt="">
				<span class="head-name">{{element.user}}</span>
				<span class="head-time">
					<i class="icon iconfont">&#xe72d;</i>
					<i>{{element.date}}</i>
					<i>{{element.time}}</i>
				</span>
			</div>
			<div class="title">
				<p>{{element.title}}</p>
			</div>
			<div class="cont">
				<div class="cont-left">
					<p>{{element.cont}}</p>
				</div>
				<div class="cont-right">
					<img :src="element.contimg" alt="">
				</div>
			</div>
			<div class="foot clearfix">
				<div class="foot-left">
          <i class="icon iconfont">&#xe611;</i>
          <span v-for="(item,index) in element.labels" :key="index">{{item}}</span>
        </div>
        <div class="foot-right">
        	<span><i class="icon iconfont">&#xe634;</i><i>{{element.zannum}}</i></span>
        	<span><i class="icon iconfont">&#xe630;</i><i>{{element.looknum}}</i></span>
        </div>
			</div>
		</div>
	</div>
  </div>
</template>

<script>
export default {
  name: 'Comments',
  props:{
  	CommentsData:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  }
}
</script>

<style lang="css" scoped>
.comments{
	background: #fff;
	font-size: 0.16rem;
	margin-bottom: 0.15rem;
}
.head,.title,.cont,.foot{
	padding: 0.1rem;
}
.head .topic{
	color: #000;
	padding: 0 0 0 0.08rem;
	border-left: 0.05rem solid #F58344;
}
.head .sorting{
	font-size: 0.14rem;
	float: right;
}
.comments-con{
	border-top: 0.01rem solid #E6E6E6;
}
.comments-con-head{
	margin: 0.15rem 0.1rem 0 0.1rem;
}
.comments-con-head img{
	border-radius: 50%;
	width: 0.4rem;
  height: 0.4rem;
}
.comments-con-head span{
	font-size: 0.14rem;
	color: #999;
}
.comments-con-head .head-time{
	float: right;
	line-height: 0.35rem;
}
.cont>div{
	float: left;
	font-size: 0.14rem;
}
.cont-left{
	width: 55%;
	margin-right: 0.15rem;
}
.cont-right{
	width: 40%;
}
.cont-right img{
	width: 100%;
	height: 0.8rem;
}
.foot>div{
	display: inline-block;
	color: #A7A7A7;
  margin: 0.15rem 0;
  font-size: 0.14rem;
}
.foot .foot-left span{
	margin-left: 0.03rem;
}
.foot .foot-right{
	float: right;
}
.foot .foot-right span{
	margin:0 0.05rem;
}
.foot .foot-right span i{
	margin-left: 0.05rem;
}
</style>